@font-size-xxxs: 10px;

.text-editor-container {
    position: relative;
    width: 100%;
    height: 30px;
    user-select: none;
    border: 1px solid rgb(var(--border-color));
    transition: all 0.15s;
    border-radius: var(--border-radius-base);

    &:hover {
        border: 1px solid rgb(var(--hyacinth-500));
    }

    &:active {
        border: 1px solid rgb(var(--hyacinth-500));
    }

    &-active {
        border: 1px solid rgb(var(--hyacinth-500));

        &:hover {
            border: 1px solid rgb(var(--hyacinth-500));
        }
    }

    &-error {
        border: 1px solid rgb(var(--red-400));

        &:hover {
            border: 1px solid rgb(var(--red-400));
        }
    }

    &-disabled {
        border-color: rgb(var(--grey-100));

        &:hover {
            border-color: rgb(var(--grey-100));
        }
    }

    &-placeholder {
        position: absolute;
        top: 49%;
        left: 5px;
        transform: translateY(-50%);
        color: rgb(var(--grey-400));
        font-size: var(--font-size-xs);
        pointer-events: none;
    }
}

.text-editor-validation-error {
    // border: 1px solid rgb(var(--error-color));
    // background: rgb(var(--red-50));
    // border-radius: var(--border-radius-base);
    // padding: 2px 3px;
    position: absolute;
    top: -16px;
    font-size: @font-size-xxxs;
    color: rgb(var(--red-400));
}
